<template>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 选择站点卡片 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">选择站点</div>
            </div>
            <div class="card-content">
                <div class="card-input" @click="showSearch('site')">
                    <span v-if="selectedSite" style="color: #333"> {{ selectedSite.site_name }} </span>
                    <span v-else> 点击选择站点 </span>
                </div>
            </div>
        </div>
        <!-- 选择充电桩卡片 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">选择充电桩</div>
            </div>
            <div class="card-content">
                <div class="card-input" @click="showSearch('device')">
                    <span v-if="selectedDevice" style="color: #333"> {{ selectedDevice.station_name }} </span>
                    <span v-else> 点击选择充电桩 </span>
                </div>
            </div>
        </div>

        <!-- 充电插口 -->
        <div v-if="portList.length" class="card">
            <div class="card-header">
                <div class="card-title">充电口状态</div>
                <div class="card-header-right">
                    空闲{{ freeNum }} <span>/占用{{ inUseNum }}</span>
                </div>
            </div>
            <div class="card-content">
                <div class="port-item" :class="[item.can_charge ? '' : 'in-use']" v-for="(item, index) in portList" :key="index" @click="select(item, index)">
                    <div class="port-box">
                        {{ index === portIndex ? "已选" : "空闲" }}
                        <div class="selected-border"></div>
                    </div>
                    <div class="port-name">{{ item.port }}号位</div>
                </div>
            </div>
        </div>

        <!-- 搜索弹窗 -->
        <ant-popup :visible="visible" position="top">
            <div class="popup-content">
                <!-- 搜索框区域 -->
                <div class="search-container">
                    <!-- <img class="back" :src="imgs.back" alt="" @click="back" /> -->
                    <div class="search-input">
                        <img :src="imgs.search" alt="" />
                        <input type="text" v-model="searchValue" :placeholder="searchType === 'site' ? '请输入站点名称' : '请输入充电桩名称'" />
                    </div>
                    <div class="search-close" @click="visible = false">收起</div>
                </div>
                <!-- 搜索结果列表 -->
                <template v-if="searchType === 'site'">
                    <div class="search-list">
                        <div class="list-content">
                            <div class="search-item" v-for="(item, index) in siteFilterList" :key="index" @click="selectSite(item)">{{ item.site_name }}</div>
                        </div>
                        <div class="list-total">共{{ siteFilterList.length }}条</div>
                    </div>
                </template>
                <template v-else>
                    <div class="search-list">
                        <div class="list-content">
                            <div class="search-item" v-for="(item, index) in deviceFilterList" :key="index" @click="selectDevice(item)">{{ item.station_name }}</div>
                        </div>
                        <div class="list-total">共{{ deviceFilterList.length }}条</div>
                    </div>
                </template>
            </div>
        </ant-popup>
    </div>
</template>
<script>
import { getSiteListAPI, getStationListAPI, getStationDetailAPI } from "../src/api/api";

const app = getApp();
export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            visible: false, // 弹窗显示状态
            siteList: [], // 站点列表
            deviceList: [], // 充电桩列表
            searchValue: "", // 搜索值
            selectedSite: null, // 选中的站点
            selectedDevice: null, // 选中的充电桩
            searchType: "site", // 搜索类型 site:站点 device:充电桩
            inUseNum: 0, // 使用数
            freeNum: 0, //空闲数
            portList: [],
        };
    },
    created() {
        // 页面创建时获取站点列表
        this.getSiteList();
    },
    watch: {
        selectedSite(newVal) {
            this.selectedDevice = null;
            this.deviceList = [];
            this.portList = [];
            if (newVal) {
                this.getDeviceList(newVal.site_id);
            }
        },
        selectedDevice(newVal) {
            this.portList = [];
            if (newVal) {
                this.getPortList(newVal.station_serial_num);
            }
        },
    },
    computed: {
        // 根据搜索值过滤站点列表
        siteFilterList() {
            return this.siteList.filter((item) => item.site_name.includes(this.searchValue));
        },
        // 根据搜索值过滤充电桩列表
        deviceFilterList() {
            return this.deviceList.filter((item) => item.station_name.includes(this.searchValue));
        },
    },
    methods: {
        // 关闭搜索弹窗
        back() {
            this.visible = false;
        },
        // 显示搜索弹窗
        showSearch(type) {
            this.searchValue = "";
            this.searchType = type;
            this.visible = true;
        },
        // 获取站点列表数据
        getSiteList() {
            getSiteListAPI().then((res) => {
                this.siteList = res;
                console.log(this.siteList);
            });
        },
        // 获取充电桩列表数据
        getDeviceList(siteId) {
            getStationListAPI({
                siteId: siteId,
            }).then((res) => {
                this.deviceList = res;
            });
        },
        getPortList(stationId) {
            getStationDetailAPI({
                stationSerialNumPort: stationId,
            }).then((res) => {
                this.portList = res.station_port_list || [];

                // 计算空闲/占用充电口数
                this.freeNum = 0;
                this.inUseNum = 0;
                this.portList.forEach((item, index) => {
                    if (item.can_charge) {
                        this.freeNum++;
                    } else {
                        this.inUseNum++;
                    }
                });
            });
        },
        // 选择站点
        selectSite(item) {
            this.selectedSite = item;
            this.visible = false;
        },
        // 选择充电桩
        selectDevice(item) {
            if (!this.selectedSite) {
                uni.showToast({
                    title: "请先选择站点",
                    icon: "none",
                });
                return false;
            }
            this.selectedDevice = item;
            this.visible = false;
        },
    },
};
</script>
<style scoped lang="less">
/* 页面容器样式 */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f6f6f6;
    padding-top: 24rpx;
    min-height: 100vh;
    box-sizing: border-box;
    /* 卡片样式 */
    .card {
        width: 694rpx;
        padding: 28rpx;
        box-sizing: border-box;
        border-radius: 24rpx;
        background-color: #fff;
        margin-bottom: 24rpx;
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .card-title {
                font-size: 32rpx;
                line-height: 42rpx;
                font-weight: bold;
            }

            .card-header-right {
                font-size: 28rpx;
                line-height: 32rpx;

                span {
                    color: #9a9a9a;
                    margin-left: 10rpx;
                }
            }
        }

        .card-content {
            position: relative;
            display: flex;
            flex-wrap: wrap;

            .card-input {
                width: 100%;
                background-color: #f6f6f6;
                border-radius: 16rpx;
                padding: 24rpx;
                font-size: 28rpx;
                line-height: 38rpx;
                color: #999;
                box-sizing: border-box;
            }

            .port-item {
                width: 84rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 30rpx;
                margin-right: 26rpx;

                &:nth-child(6n) {
                    margin-right: 0;
                }

                .port-box {
                    position: relative;
                    width: 84rpx;
                    height: 84rpx;
                    background-image: linear-gradient(136.39deg, #8bdab0 0%, #08bfa8 100%);
                    color: #fff;
                    border-radius: 20rpx;
                    margin-bottom: 8rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 22rpx;
                    box-sizing: border-box;

                    .selected-border {
                        position: absolute;
                        top: -6rpx;
                        width: 96rpx;
                        height: 96rpx;
                        border: 2rpx solid #08bfa8;
                        border-radius: 26rpx;
                        box-sizing: border-box;
                        display: none;
                    }
                }

                .port-name {
                    font-size: 24rpx;
                    line-height: 32rpx;
                    color: #656565;

                    &.selected {
                        color: #08bfa8;
                    }
                }

                &.in-use {
                    .port-box {
                        background-image: none;
                        background-color: #f6f6f6;
                        color: #cbcbcb;
                        border: 1rpx solid #cbcbcb;

                        .port-name {
                            color: #cbcbcb;
                        }
                    }
                }

                &.selected {
                    .port-box {
                        background-image: none;
                        background-color: #08bfa8;

                        .selected-border {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
/* 弹窗内容样式 */
.popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 搜索框容器 */
    .search-container {
        flex: none;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 20rpx;
        .back {
            width: 30rpx;
            height: 30rpx;
        }
        .search-input {
            flex: auto;
            height: 68rpx;
            border-radius: 34rpx;
            background-color: #f6f6f6;
            margin-right: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 0 30rpx;
            img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 20rpx;
            }
            input {
                flex: auto;
            }
        }
        .search-close {
            color: #08bfa8;
        }
    }
    /* 搜索结果列表 */
    .search-list {
        flex: auto;
        height: 70vh;
        box-sizing: border-box;
        padding: 20rpx 0;
        border-top: 1rpx solid #f6f6f6;
        display: flex;
        flex-direction: column;
        .list-total {
            flex: none;
            text-align: center;
            font-size: 24rpx;
            line-height: 38rpx;
            color: #999;
            margin-top: 10rpx;
        }
        .list-content {
            flex: auto;
            overflow: auto;
            padding: 0 20rpx;
            .search-item {
                padding: 12rpx;
                border-bottom: 1rpx solid #f6f6f6;
                font-size: 26rpx;
                line-height: 40rpx;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}
</style>
